<link rel="stylesheet" type="text/css" href="<?= base_url() ?>/assets/jquery/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="//assets.locaweb.com.br/locastyle/1.2.15/bootstrap/css/bootstrap.css">
<!-- <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/locaweb-style/img/locastyle.css">
<link rel="stylesheet" type="text/css" href="/locawebstyle/v1/assets/legacy/stylesheets/manual.css">-->
<style>
    th,th:hover{background-size: auto 100% ;white-space: nowrap;padding: 10px}
    .trTopicos td{width: 135px !important;text-align: center;}
    #Tabletopicos{width: auto; max-width:none;}
    .chosen-container{width: auto !important;min-width: 264px}
    .morePage{cursor: pointer;}

</style>
<script type="text/javascript">
$(document).ready(function(){
    createMultiSelect();
    $("#disciplinas").change(function(){        
       $(this).CarregarTopicosAjax();
    });    
      
   // $("#disciplinas").change(function(){
//        var codBanca=$("#cod_banca").val();
//        var cod_disciplina=$(this).val();
//        var url= "projeto/jsonTopicosNaoVinculadas/"+codBanca+"/"+cod_disciplina;
       // atualizarSelect(url);
        
         // $("#topicosVinculados").load("projeto/jsonTopicosVinculadas/"+codBanca+"/"+cod_disciplina,function(){
           //   $(this).removeClass("hide");
    //      });
   //    })
   
    
    
    });
    function removerTopico(topico,codTopicoBanca,banca,disciplina){
//        alert(topico);
//        alert(banca);
//        alert(disciplina);
        $(".msg").load("projeto/removerTopico/"+topico+"/"+codTopicoBanca,function(){
            $("#topicosVinculados").load("projeto/jsonTopicosVinculadas/"+banca+"/"+disciplina);
            var url= "projeto/jsonTopicosNaoVinculadas/"+banca+"/"+disciplina;
            atualizarSelect(url);
        }).addClass('alert-info').css('fontSize','15px');
        
    }

    function createMultiSelect(){
        //$('.multiselect').multiselect('refresh');
        $('.multiselect').multiselect({    
            includeSelectAllOption: true,   
            maxHeight: 240,
            buttonWidth: '500px',
            nonSelectedText: 'Selecione um tópico',
            selectAllText: 'Selecionar Todos',          
            
            
        });
         
    }
</script>

<style>
    .chosen-results{max-height: 180px;} 
    //  .dropdown-menu .active > a{  background: red !important;color:blue !important;}
    .dropdown-menu .active > a,.dropdown-menu li > a:hover{height: 22px; }
    .dropdown-menu .active > a >label,.dropdown-menu li > a >label:hover{color: #fff !important}
    .dropdown-menu {width: 665px;}
    
    
</style>

<div id="detalheDominio" style="overflow:hidden;height:440px">
    <form id="form_addtopicoBanca" name="form_add" method="post" action="" enctype="multipart/form-data">

        <fieldset>
            <div class="line">
                <input name="cod_banca" id="cod_banca" type="hidden" class="textfield-text is_required" readonly=""  required="required" value="<?= $banca->CODIGO ?>"  />
                <input name="quantidade" type="hidden" id="quantidade" class="textfield-text is_required" readonly=""  required="required" value="0"  />
                <label style=" float:left; width:270px;">
                    Projeto
                    <br />
                    <input name="Banca" type="text" class=" disabled" required="required" readonly="" value="<?= $banca->DESCRICAO ?>" style="width:250px;">
                </label>
            </div>
            
            <?php
            if ($disciplinas==null){
                echo "<br class='clear'> <div class='alert alert-danger'>Nenhuma disciplina vinculada</div>";
            }else{ ?>  
            <div class="">
                <label >
                    Disciplina
                    <br />
                    

                       <select id="disciplinas" name="disciplinas"  title="Nenhum Selecionado">
                            <option value="0" > Selecione a disciplina </option>
                            <?php
                            foreach ($disciplinas as $key => $disciplina): ?>
                            <option value="<?= $disciplina['CODIGO'] ?>" > <?= $disciplina['DESCRICAO'] ?> </option>
                            <?php endforeach; ?>
                        </select>
                </label>



            </div>
            <?php } ?>
        </fieldset>
        
        <label>Topico Banca<br />
            
            <input name="topicoBanca" type="text" id="topicoBanca" class="textfield-text is_required"  required="required" placeholder="Digite o nome do tópico"  /> 
                </label>
        <div class='line'>
        
        <div class='span8'>
           <label >
                    Tópicos
                    <br />
                    <div class="btn-group">

                        <select id="topicoNaoVinculado" name="topico[]" class="multiselect" multiple="multiple" title="Nenhum Selecionado">
                            

                            <?php
                         /*
                            foreach ($topicos as $key => $topico):
                                $selected = "";

//                                 foreach ($disciplinasVinculadas as $key => $disciplinasVinculada):
//                                  if ($disciplina->CODIGO == $disciplinasVinculada['COD_DISCIPLINA']) {
//                                  $selected = "selected";
//                                  }
//                                  endforeach; 
                                ?>

                                <option value="<?= $topico['CODIGO'] ?>" <?= $selected ?> > <?= $topico['DESCRICAO'] ?> </option>
                            <?php endforeach; */?>
                        </select>
                        <!--                                                    <button id="example21-toggle" class="btn btn-primary">Marcar Todos</button>-->
                        <!--								<button id="example34-select" class="btn btn-primary">Select</button>
                                                                                        <button id="example34-deselect" class="btn btn-primary">Deselect</button>
                                                                                        <button id="example34-values" class="btn btn-primary">Values</button>-->
                    </div>

                </label>
        </div>
        </div>
        <fieldset>
            
            <!--<legend><a class="selectTopico" href="">Selecionar tópicos</a></legend>-->
            <div class="line" style="overflow: auto;width: auto;">
                

                <div style="float:left; width:99%;">
                    <span class="biblio-0" > Selecione ao menos um tópico </span>
                    <!-- Tabs / Guias -->
                    <ul class="tabs" style=" width:100%;">
                        <!--  <li class="active"><a href="#tab1" data-toggle="tab">7 dias</a></li>
                          <li><a href="#tab2" data-toggle="tab">30 dias</a></li>
                          <li><a href="#tab3" data-toggle="tab">6 meses</a></li>-->
                    </ul>

                    <!-- Código do conteúdo das tabs -->
                    <div class="tab-content">
                        <!--  <div class="tab-pane active" id="tab1">Conteúdo Tab 1</div>
                         <div class="tab-pane" id="tab2">Conteúdo Tab 2</div>
                         <div class="tab-pane" id="tab3">Conteúdo Tab 3</div>-->
                    </div>
                    
                      
                    
                </div>
                
                <p class="msg alert " style=" float:left; font-size:11px; line-height:16px; color:#666; margin-top:5px;"><b style="margin-right:5px;">
                        Atenção: </b> Lembre-se todos os campos são obrigatórios.</p>
            </div>
           
        </fieldset>
         <div id="topicosVinculados"  class="alert alert-info hide" style="overflow: auto; height: 125px;width: 630px;"></div>
         
        <div id="top" style="display:none">Conteúdo Tab 3</div>

    </form>
</div>
</div>